<template>
	<view class="container">
		<view class="user-info">
			<image :src="dataList.avatar" class="avatar" mode="aspectFit"></image>
			<view class="info">
				<view class="nickName">{{ dataList.nickName }}</view>
				<view class="sign">{{ dataList.sign }}</view>
			</view> 
		</view>
		<view class="form">
			<view class="form-group">
				<label for="message" class="label">填写验证消息</label>
				<textarea id="message" placeholder="请输入验证消息" v-model="message" class="input" rows="3"></textarea>
			</view>
			<view class="form-group">
				<label for="text" class="label">备注</label>
				<input type="text" id="text" placeholder="请输入备注" v-model="text" class="input">
			</view>
		</view>
		<button @click="add_friend" class="btn">发送</button>		
	</view>
</template>

<script>
import {hasLogin, logout, getUserid} from '@/store/index.js'
	
	export default {
		data() {
			return {
				user:{
					userId: '',
					nickName: '', // 用户昵称
					avatar: null, // 用户头像URL
					sign: '',
					
				},
				data:{
					name: "张三",
					sign: "21222112",
					avatar: 'https://p.qqan.com/up/2021-4/16182800486083341.png',
					user_Name: '',
				},
				message: ' ', // 验证消息
				text: ' ', // 备注
			}
		},
		onLoad() {
			// 从上一页传递的数据中获取搜索到的用户信息
			const { avatar, nickName, sign } = this.$route.query;
			this.user.avatar = avatar || '';
			this.user.nickName = nickName || '';
			this.user.sign = sign || '';
		},
		methods: {
			add_friend(){
				uni.request({
					url: 'http://localhost:8090/api/friends/add', // 地址
					method: 'POST', // 在前边已经判断出不是好友的情况下，向好友申请表中添加验证信息和备注
					data: {  
						userId1: this.data.userName, // 发起好友请求的用户
						userId2: this.data.data.userName,	// 接受好友请求的用户
						status: this.message,
						text: this.text // 这个是备注
					},
					success: (res) => {
						if (res.data.code === 200) {
							uni.showToast({
								title: '好友申请已提交',
								icon: 'success',
							});
							uni.navigateBack() // 返回上一个页面
						} else { 
							uni.showModal({
								title: '提示',
								content: '添加好友时遇到问题，请稍后重试！',
							});
						}
					},
					fail: () => {
						uni.showModal({
							title: '网络错误',
							content: '无法连接服务器，请检查网络连接！',
						});
					},
				});
			}
		}
	}
</script>

<style scoped>
.container {
  padding: 20px;
  margin-left: 3%;
  margin-right: 9%;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 20px;
}

.info {
  flex: 1;
}

.nickName {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.sign {
  font-size: 16px;
  color: #666;
}

.form-group {
  margin-bottom: 20px;
}

.label {
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}

.input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.btn {
  width: 100%;
  padding: 10px;
  background-color: #409EFF;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin-left: 3%;
}

.btn:hover {
  background-color: #66b1ff;
}
</style>